<template>
    <el-menu default-active="1-4-1"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             :collapse="isCollapse"
             background-color="#312C32"
             text-color="#fff"
             active-text-color="#DAAD86">
        <h3>{{isCollapse ? '菜单' : 'Java在线编程系统'}}</h3>
        <el-menu-item @click="clickMenu(item)" v-if="item.role.indexOf(role) != -1" v-for="item in noChildren" :index="item.path" :key="item.path">
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>

        <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
            <template slot="title">
                <i :class="'el-icon-' + item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="(subitem, subindex) in item.children" :key="subitem.path">
                <el-menu-item :index="subindex">{{subitem.label}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>

<script>
    import Main from '../views/Main'
    import home from '../views/home'
    import login from '../views/login'
    import problemInput from '../views/admin/problem/InputView'
    import collection from '../views/problem/collection'
    import collectionManage from '../views/admin/problem/collection'
    import Admin from '../views/admin'
    import guestcode from '../views/guest/code'
    import guest from '../views/guest'
    import hostView from '../views/host'
    import problemManage from '../views/admin/problem/promanage'
    import Detail from '../views/admin/problem/detail'

    export default {
        data() {
            return {
                //是否水平折叠收起
                //isCollapse: false,
                //菜单数据，由后端接口提供
                menu: [
                    //游客
                    {
                        path: '/host',
                        name: 'home',
                        label: '首页',
                        icon: 's-home',
                        url: 'Home/Home',
                        role: ['1', '2']
                    },
                    //编程
                    {
                        path: '/guest/code',
                        name: 'guestcode',
                        label: '编程',
                        icon: 'edit',
                        url: '/guest/code',
                        component: guestcode,
                        role: ['3']
                    },

                    //题目集
                    {
                        path: '/collection',
                        name: 'home',
                        label: '题目集',
                        icon: 's-management',
                        url: 'Home/Home',
                        role: []
                    },
                    {
                        path: '/admin/problem/collection',
                        name: 'practice',
                        label: '题目集管理',
                        icon: 'folder-opened',
                        url: 'Practice/Practice',
                        role: ['1', '2']
                    },
                    {
                        path: '/admin/user',
                        name: 'data',
                        label: '用户管理',
                        icon: 'user',
                        url: 'Data/Data',
                        role: ['2']
                    },
                    //教师端
                    {
                        path: '/admin/problem/manage',
                        name: 'problemInput',
                        label: '题目管理',
                        icon: 'crop',
                        url: 'Input/Input',
                        role: ['2']
                    },
                    //统计
                    // {
                    //     path: '/data',
                    //     name: 'home',
                    //     label: '统计',
                    //     icon: 's-data',
                    //     url: 'Home/Home',
                    //     role: ['1', '3']
                    // },
                ],
                role: '',   //角色
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //跳转页面
            clickMenu(item){
                this.$router.push({
                    path: item.path,

                })
            }
        },
        //计算属性
        computed: {
            //无孩子菜单
            noChildren(){
                return this.menu.filter(item => !item.children)
            },
            //有孩子菜单
            hasChildren(){
                return this.menu.filter(item => item.children)
            },
            //获取isCollapse
            isCollapse(){
                return this.$store.state.tab.isCollapse
            }
        },
        created: function () {
            this.role = localStorage.getItem("role");
        }
    }
</script>

<style lang="less" scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu {
        height: 100%;
        /*去除边框*/
        border: none;
        h3 {
            color: #ffffff;
            text-align: center;
            line-height: 48px;
        }
    }
</style>